@import "fontsize-and-color.scss";

.mobile-list {
  margin-top: 24px;

  .mobile-list__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;

    .list-title {
      @include font-very-big;
      color: #333;
      cursor: pointer;
    }

    .more {
      display: flex;
      align-items: center;
      @include font-big;
      color: $main-text-2nd;
      cursor: pointer;
      transition: .2s;

      .iconfont {
        display: block;
        font-size: 20px;
        line-height: 20px;
        color: $secondary-text-1st;
        margin-left: 5px;
        transition: .2s;

      }

      &:hover,
      &:hover .iconfont {
        color: $mi-theme-color;
      }
    }
  }

  .mobile-list__body {
    ul {
      display: grid;
      grid: repeat(2, 300px) / repeat(5, 1fr);
      gap: 14px;

      li {
        position: relative;

        &:first-child {
          grid-row: span 2;
        }
      }
    }
  }
}